<template>
	<view>
		<view class="code-img">
			<!-- <image src="/static/images1/recharge-img.png" style="width: 240rpx; height: 240rpx;"></image> -->
			<view style="width:120px;height:120px;border: 6rpx solid #ffffff;">
				<canvas id="qrcode" canvas-id="qrcode" style="width: 120px;height:120px;" />
			</view>
		</view>
		<view class="form-box">
			<u-form labelPosition="top" labelStyle="color:#ffffff" :labelWidth="200" :model="info">
				<u-form-item :label="getStr('my.recharge.address')" prop="address">
					<u-input v-model="info.rechargeAddress" disabledColor="#262930" fontSize="11px" :placeholder="getStr('my.recharge.placeholderAddress')" readonly
						color="#ffffff" placeholderStyle="color:#666666" border="none">
						<template #suffix>
							<up-copy :content="info.rechargeAddress">
								<image src="/static/images1/index/copy-icon1.png" style="width: 24rpx; height: 24rpx;"></image>
							</up-copy>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item :label="getStr('my.recharge.comment')" prop="rechargeCode">
					<u-input v-model="info.rechargeCode" disabledColor="#262930" :placeholder="getStr('my.recharge.placeholderRemarks')" color="#ffffff" readonly
						placeholderStyle="color:#666666" border="none">
						<template #suffix>
							<up-copy :content="info.rechargeCode">
								<image src="/static/images1/index/copy-icon1.png" style="width: 24rpx; height: 24rpx;"></image>
							</up-copy>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item :label="getStr('my.recharge.minimum')" prop="rechargeMinAmount">
					<u-input v-model="info.rechargeMinAmount" disabledColor="#262930" :placeholder="getStr('my.recharge.placeholderMininum')" readonly
						color="#ffffff" placeholderStyle="color:#666666" border="none"></u-input>
				</u-form-item>
			</u-form>
		</view>

		<view class="instructions-box">
			<view class="title-box">{{ getStr('my.recharge.tipstit') }}</view>
			<view class="content">
				<text>{{ getStr('my.recharge.tips1') }}</text>

				<text>{{ getStr('my.recharge.tips2') }}</text>

				<text>{{ getStr('my.recharge.tips3') }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onShow,
		onLoad,
	} from '@dcloudio/uni-app'
	import {getRecharge} from '@/common/api/common.js'
	import UQRCode from 'uqrcodejs';
	const info = ref({})

	const getStr = (key) => {
		return uni.$t(key)
	}
	const setIsRender = () => {
		isRender.value = false
		setTimeout(() => {
			isRender.value = true
		}, 50)
	}
	
	const setQrcode = (text) => {
		const qr = new UQRCode();
		qr.data = text;
		qr.size = 120;
		qr.make();
		const ctx = uni.createCanvasContext('qrcode', this); // 组件内调用需传this，vue3 中 this 为 getCurrentInstance()?.proxy
		qr.canvasContext = ctx;
		qr.drawCanvas();
	}
	
	const getRechargeFn = async () => {
		const res = await getRecharge({telegramId:uni.getStorageSync('telegramId')})
		if(res.code == 200){
			info.value = res.data
			setQrcode(res.data.rechargeAddress)
		}
	}

	onLoad(()=>{
		getRechargeFn()
	})
	onShow(() => {
		uni.$tg.showButton()
		setIsRender()
	})
</script>
<style>
	page {
		background: #1C1E23;
	}
</style>
<style lang="scss" scoped>
	.code-img {
		width: 280rpx;
		height: 280rpx;
		margin: 50rpx auto 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #1C1C25;
		border: 1rpx solid #55555F;
		border-radius: 12rpx;
	}

	.form-box {
		width: calc(100vw - 28rpx - 28rpx);
		padding-top: 56rpx;
		margin: 0 auto;

		::v-deep .u-form-item {
			margin-bottom: 20rpx;

			text {}
		}

		::v-deep .u-form-item__body__left {
			margin-bottom: 24rpx;
		}

		::v-deep .u-form-item {
			margin-bottom: 0;
		}

		::v-deep .u-form-item__body {
			padding: 0 0 50rpx;
		}

		::v-deep .u-input {
			background-color: #262930;
			height: 88rpx;
			padding: 0 18rpx 0 28rpx !important;
			box-sizing: border-box;
			font-size: 28rpx;
		}
	}

	.instructions-box {
		width: calc(100% - 28rpx - 28rpx);
		margin: 0 auto;
		background-color: #262930;
		border-radius: 16rpx;

		.title-box {
			height: 80rpx;
			border-bottom: 1rpx dashed #FFFFFF80;
			padding: 0 30rpx;
			box-sizing: border-box;
			line-height: 80rpx;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.content {
			color: #ffffff80;
			font-size: 24rpx;
			line-height: 38rpx;
			padding: 28rpx;

			text {
				display: block;
				margin-bottom: 38rpx;
			}
		}
	}
</style>